import React, {useEffect} from 'react';
import {Link} from 'react-router-dom';
import RouteView from 'components/RouteView';
import {Layout, Button, Menu, Icon} from 'antd';
const {Sider, Header, Content, Footer} = Layout;
export default (props: any) => {
    useEffect(() => {
        console.log('Main');
    }, []);
    return (
        <Layout className="ui-vw-100 ui-vh-100">
            <Sider theme="light" className="flex-col just-center ui-pt-20">
                <Button type="primary">
                    <Link to="/">LOGO 返回首页</Link>
                </Button>
                <section className="flex-col">
                    <Menu style={{width: '100%'}}>
                        <Menu.Item>
                            <Link to="/main/dashboard">dashboard</Link>
                        </Menu.Item>
                        <Menu.Item>
                            <Link to="/main/setting">setting</Link>
                        </Menu.Item>
                    </Menu>
                </section>
            </Sider>
            <Layout>
                <Header style={{backgroundColor: '#ccc'}}>Header</Header>
                <Content>
                    <RouteView pathKey={props.match.path} />
                </Content>
                <Footer className="flex just-center">Footer</Footer>
            </Layout>
        </Layout>
    );
};
